<template>
  <div class="app-container" style="display: inline-block; vertical-align: top">
    <!-- 初始图 -->
    <!-- style="width: 600px; height: 300px; background-color: #fff" -->
    <el-card style="margin: 20px">
      <!-- <div class="headerTitle">基于岳麓书院的知识图谱整理</div> -->
      <echart-map-show style="width: 900px; height: 500px"></echart-map-show>
      <!-- <div id="main" style="width: 900px; height: 300px"></div
    > -->
    </el-card>
  </div>
</template>

<script>
/* eslint-disable */
import EchartMapShow from '@/page/echartMapShow.vue';
// 省份名字中英文对应数据
var provinceNameArr = [
  // 23个省
  { chineseName: '广东省', EnglishName: 'guangdong' },
  { chineseName: '青海省', EnglishName: 'qinghai' },
  { chineseName: '四川省', EnglishName: 'sichuan' },
  { chineseName: '海南省', EnglishName: 'hainan' },
  { chineseName: '陕西省', EnglishName: 'shaanxi' },
  { chineseName: '甘肃省', EnglishName: 'gansu' },
  { chineseName: '云南省', EnglishName: 'yunnan' },
  { chineseName: '湖南省', EnglishName: 'hunan' },
  { chineseName: '湖北省', EnglishName: 'hubei' },
  { chineseName: '黑龙江省', EnglishName: 'heilongjiang' },
  { chineseName: '贵州省', EnglishName: 'guizhou' },
  { chineseName: '山东省', EnglishName: 'shandong' },
  { chineseName: '江西省', EnglishName: 'jiangxi' },
  { chineseName: '河南省', EnglishName: 'henan' },
  { chineseName: '河北省', EnglishName: 'hebei' },
  { chineseName: '山西省', EnglishName: 'shanxi' },
  { chineseName: '安徽省', EnglishName: 'anhui' },
  { chineseName: '福建省', EnglishName: 'fujian' },
  { chineseName: '浙江省', EnglishName: 'zhejiang' },
  { chineseName: '江苏省', EnglishName: 'jiangsu' },
  { chineseName: '吉林省', EnglishName: 'jilin' },
  { chineseName: '辽宁省', EnglishName: 'liaoning' },
  { chineseName: '台湾省', EnglishName: 'taiwan' },
  // 5个自治区
  { chineseName: '新疆维吾尔族自治区', EnglishName: 'xinjiang' },
  { chineseName: '广西壮族自治区', EnglishName: 'guangxi' },
  { chineseName: '宁夏回族自治区', EnglishName: 'ningxia' },
  { chineseName: '内蒙古自治区', EnglishName: 'neimenggu' },
  { chineseName: '西藏自治区', EnglishName: 'xizang' },
  // 4个直辖市
  { chineseName: '北京直辖市', EnglishName: 'beijing' },
  { chineseName: '天津直辖市', EnglishName: 'tianjin' },
  { chineseName: '上海直辖市', EnglishName: 'shanghai' },
  { chineseName: '重庆直辖市', EnglishName: 'chongqing' },
  // 2个特别行政区
  { chineseName: '香港特别行政区', EnglishName: 'xianggang' },
  { chineseName: '澳门特别行政区', EnglishName: 'aomen' },
];
export default {
  name: 'Map',
  components: { EchartMapShow },
  mounted: function () {},
  methods: {
    // 单独获取陕西的市
    getJsonShaanxi() {
      this.$http.get('/map/province/shangxi1' + '.json').then((res) => {
        const { features: data } = res.data;
        // 获取市经纬度 从json中
        const cityJW = {};
        for (const item of data) {
          cityJW[item.properties.name] = item.properties.cp;
        }
        console.log(cityJW);
      });
    },
    getJson() {
      this.$http.get('/map/china.json').then((res) => {
        console.log(res);
        // 省 经纬度
        const { features: data } = res.data;
        const provinceJW = {};
        // const cityJW = {}
        for (const item of data) {
          provinceJW[item.properties.name] = item.properties.cp;
        }
        console.log(provinceJW);
        // 市 经纬度
        // for (const item2 of Object.keys(provinceJW)) {
        //   // 获取省的拼音
        //   const ename = provinceNameArr.find(item => item.chineseName.includes(item2)).EnglishName
        //   // 根据拼音找到对应的json文件
        //   this.$http.get('/map/province/' + ename + '.json').then(res => {
        //     const { features: data } = res.data
        //   // 获取市经纬度 从json中

        //     for (const item of data) {
        //       cityJW[item.properties.name] = item.properties.cp
        //     }
        //     console.log(cityJW);
        //   })
        // }
      });
    },
    // 解析书院txt
    parseTxt() {
      this.$http.get('/shuyuan.txt').then((res) => {
        const { data } = res;
        const arr = data.split('\r\n');
        // 省 书院信息
        const arrRes = [];
        // 市级别 书院信息
        const arrRes2 = [];
        // 市级别 书院信息-省份名为3个字的
        const arrRes3 = [];
        // 需要的数据格式为： [{name:'xx市',  list:[各个书院名称], value:list的长度,}]
        // 现在的数据格式为: ['书院名\t山西太原'，'']
        for (const item of arr) {
          const arrTemp = item.split('\t');
          // 1. 先解析位置为4个汉字的数据
          if (arrTemp[1]?.length == 4) {
            // 1.1 提取省份
            const provinceName = arrTemp[1].substr(0, 2);
            // 判断该省份是否已存在
            const obj = arrRes.find((item) => item.name == provinceName);
            // 存在则数量+1
            if (obj) {
              obj.value++;
              // 并将书院名字存入
              obj.list.push(arrTemp[0]);
            } else {
              arrRes.push({ name: provinceName, value: 1, list: [arrTemp[0]] });
            }
            // 1.2 提取市
            //1. 假设省份是两个字： 提取市，
            let cityName = arrTemp[1].substr(2);
            // 如果包含 省 字，需要去掉
            cityName = cityName.replace('省', '');
            // 如果包含 今属 俩字，就提取今属后面的地址
            if (cityName.includes('今属')) {
              console.log('cityName before:', cityName);
              const index = cityName.indexOf('今属');
              cityName = cityName.substring(index + 2, cityName.length - 1);
              console.log('cityName after:', cityName);
            }
            // 判断该市是否已存在
            const obj2 = arrRes2.find((item) => item.name.includes(cityName));
            // 存在则数量+1
            if (obj2) {
              obj2.value++;
              // 并将书院名字存入
              obj2.list.push(arrTemp[0]);
            } else {
              // 添加 '市' 后缀
              arrRes2.push({
                name: cityName + '市',
                value: 1,
                list: [arrTemp[0]],
              });
            }
            //2. 假设省份是3个字：提取市2，
            let cityName2 = arrTemp[1].substr(3);
            // 如果包含 今属 俩字，就提取今属后面的地址
            if (cityName2.includes('今属')) {
              console.log('cityName before:', cityName2);
              const index = cityName2.indexOf('今属');
              cityName2 = cityName2.substring(index + 2, cityName2.length - 1);
              console.log('cityName after:', cityName2);
            }
            // 判断该市是否已存在
            const obj3 = arrRes3.find((item) => item.name == cityName2);
            // 存在则数量+1
            if (obj3) {
              obj3.value++;
              // 并将书院名字存入
              obj3.list.push(arrTemp[0]);
            } else {
              arrRes3.push({
                name: cityName2 + '市',
                value: 1,
                list: [arrTemp[0]],
              });
            }
          }
          // 2. 解析位置>4个汉字的数据，提取市数据
          if (arrTemp[1]?.length > 4) {
            //1. 假设省份是两个字： 提取市，
            let cityName = arrTemp[1].substr(2);
            // 如果包含 省 字，需要去掉
            cityName = cityName.replace('省', '');
            // 如果包含 今属 俩字，就提取今属后面的地址
            if (cityName.includes('今属')) {
              console.log('cityName before:', cityName);
              const index = cityName.indexOf('今属');
              cityName = cityName.substring(index + 2, cityName.length - 1);
              console.log('cityName after:', cityName);
            }
            // 判断该市是否已存在
            const obj = arrRes2.find((item) => item.name == cityName);
            // 存在则数量+1
            if (obj) {
              obj.value++;
              // 并将书院名字存入
              obj.list.push(arrTemp[0]);
            } else {
              // 添加 '市' 后缀
              arrRes2.push({
                name: cityName + '市',
                value: 1,
                list: [arrTemp[0]],
              });
            }
            //2. 假设省份是3个字：提取市2，
            let cityName2 = arrTemp[1].substr(3);
            // 如果包含 今属 俩字，就提取今属后面的地址
            if (cityName2.includes('今属')) {
              console.log('cityName2 before:', cityName2);
              const index = cityName2.indexOf('今属');
              cityName2 = cityName2.substring(index + 2, cityName2.length - 1);
              console.log('cityName2 after:', cityName2);
            }
            // 判断该市是否已存在
            const obj2 = arrRes3.find((item) => item.name == cityName2);
            // 存在则数量+1
            if (obj2) {
              obj2.value++;
              // 并将书院名字存入
              obj2.list.push(arrTemp[0]);
            } else {
              arrRes3.push({
                name: cityName2 + '市',
                value: 1,
                list: [arrTemp[0]],
              });
            }
          }
        }
        // 处理后的省份数据
        console.log(arrRes);
        // 处理后的市数据-两个字的省份
        console.log(arrRes2);
        // 处理后的市数据-三个字的省份
        console.log(arrRes3);
      });
    },
  },
};
</script>

<style scoped>
#Map {
  margin-left: 300px;
}
</style>
